<template>
  <div class="reconciliation-detail">
    <div class="go-back">
      <el-button type="primary" @click="goback()">返回</el-button>
    </div>
    <div class="item" v-for="({label,value},index) in billList" :key="index">{{label}}：{{value}}</div>
  </div>
</template>

<script>
// 对账单详情
import { billDetail } from '@/api/reconciliation-and-settlement/reconciliation-detail'
export default {
  data() {
    return {
      billList: []
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const { id } = vm.$route.query
      vm.id = id
      vm.getDetail(id)
    })
  },
  beforeRouteLeave(to, from, next) {
    Object.assign(this.$data, this.$options.data())
    next()
  },
  methods: {
    // 获取详情
    getDetail(id) {
      billDetail(id).then(res => {
        this.billList = res
      })
    },
    // 返回上级
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.reconciliation-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  .go-back {
    width: 100%;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    margin: 10px 20px;
  }
  .item {
    width: 33.3%;
    min-width: 400px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
  }
}
</style>